{% extends "main.html" %}
{% load static %}

{% block "scripts" %}
	<script src="{% static "js/profile.js" %}" defer></script>
{% endblock %}

{% block "main-content" %}

{% block "navigation" %}
<!-- Navigation -->
<a class="link-dark ps-2" style="text-decoration: none;" href="{% url "jobs:index" %}">
	Home 
	</a>
		<svg class="m-1" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 19">
		<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
		</svg>
	<a class="" style="text-decoration: none;" href="#">
	Profile
</a>
{% endblock %}

<!-- Page Title -->
<h2 class="py-2 px-1 fw-bold">
	{{ request.user.course_code }}'s Profile
</h2>

<div class="d-flex flex-column flex-lg-row justify-content-between container-fluid shadow-sm bg-white p-4 rounded-3">
	<!-- Account -->
	<div class="mx-3 pb-5" style="width: 500px">
		<h4 class="pb-3 fw-bold">Account Details</h4> 
		<!-- Primary Email -->
		<div class="d-flex flex-row justify-content-between align-items-center mb-2">
			<label class="form-label fw-bold d-inline text-nowrap me-3">Primary Email: </label>
			<div class="d-flex flex-row justify-content-between align-items-center">
				{{ user.primary_email_address }}
				<span class="badge badge-pill bg-success ms-3">Verified</span>
			</div>
		</div>
		<!-- MOSS ID -->
		<div class="d-flex flex-row justify-content-between align-items-center mb-2">
			<label class="form-label fw-bold d-inline text-nowrap me-3">MOSS ID: </label>
			<div class="d-flex flex-row justify-content-between align-items-center">
				{{ user.moss_id }}
				<span class="badge badge-pill bg-success ms-3">Verified</span>
			</div>
		</div>
	</div>
	
	<!-- Update Password -->
	<div class="mx-3 pb-5" style="width: 500px">
		<h4 class="pb-3 fw-bold">Password</h4>
		<div>
			{% if passwordform %}
				{% if not passwordform.errors %}
				<div class="text-success mb-2">
					Password successfully updated!
				</div>
				{% else %}
				<div class="text-danger mb-2">
					Could not update password!
				</div>
				{% endif %}
			{% endif %}
			<form id="password-change-form" class="needs-validation" method="post" action="{% url 'users:profile' %}" novalidate>
				{% csrf_token %}
				<input type="hidden" name="form" value="password-change">
				<!-- Old Password -->
				<div class="mb-3">
					<label for="id_old_password" class="form-label fw-bold">Old Password: </label>
					<input type="password" name="old_password" class="form-control border-dark border-2{% if passwordform.errors.old_password %} is-invalid{% endif %}" id="id_old_password" maxlength="150" placeholder="Enter old password" required>
					<div id="old_password_invalid" class="invalid-feedback">
						{% if passwordform.errors.old_password %}
						{{ passwordform.errors.old_password }}
						{% endif %}
					</div>
				</div>
				<!-- New Password -->
				<div class="mb-3">
					<label for="id_new_password1" class="form-label fw-bold">New Password: </label>
					<input type="password" name="new_password1" class="form-control border-dark border-2{% if passwordform.errors.new_password1 %} is-invalid{% endif %}" id="id_new_password1" maxlength="150" placeholder="Enter new password" required>
					<div id="new_password1_invalid" class="invalid-feedback">
						{% if passwordform.errors.new_password1 %}
						{{ passwordform.errors.new_password1 }}
						{% endif %}
					</div>
				</div>
				<!-- Confirm Password -->
				<div class="mb-3">
					<label for="id_new_password2" class="form-label fw-bold">Confirm New Password: </label>
					<input type="password" name="new_password2" class="form-control border-dark border-2{% if passwordform.errors.new_password2 %} is-invalid{% endif %}" id="id_new_password2" maxlength="150" placeholder="Confirm new password" required>
					<div id="new_password2_invalid" class="invalid-feedback">
						{% if passwordform.errors.new_password2 %}
						{{ passwordform.errors.new_password2 }}
						{% endif %}
					</div>
				</div>
				<button type="submit" class="btn btn-primary mt-2 rounded-pill text-light">
					<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" fill="currentColor" class="bi bi-key-fill" viewBox="1 1 16 16">
						<path d="M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2zM2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
					</svg>
					Change Password</button>
			</form>
		</div>
	</div>

	<!-- Mailing List -->
	<div class="mx-3 pb-5" style="width: 500px">
		<h4 class="fw-bold">Mailing List</h4>
		<!-- Emails -->
		<div id="id_email_list" {% if mailing_list|length > 0 %}class="mt-3"{% endif %}>
			{% for email in mailing_list %}
			<div class="d-flex flex-row justify-content-between align-items-center border border-dark border-2 rounded-3 p-2 mt-2">
				<div>
					<svg class="mx-2" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-fill" viewBox="0 1 16 16">
						<path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555zM0 4.697v7.104l5.803-3.558L0 4.697zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757zm3.436-.586L16 11.801V4.697l-5.803 3.546z"/>
					</svg>
					<span class="email-span">{{email}}</span>
				</div>
				<div class="d-flex flex-row justify-content-between align-items-center">
					{% if email.is_verified %}
					<span class="badge badge-pill bg-success">Verified</span>
					{% else %}
					<span class="badge badge-pill bg-danger">Unverified</span>
					{% endif %}
					<button type="button" class="btn-close remove-email ms-3" aria-label="Close"></button>
				</div>
			</div>
			{% endfor %}
		</div>
		<!-- Enter New Email -->
		<div class="py-3">
			<label for="id_email5" class="form-label fw-bold">Enter New Email: </label>

			<form id="id_email_add_form" class="needs-validation" novalidate>
				<div class="mb-3">
					<input id="id_email_input" type="email" name="email" class="form-control border-dark me-4 border-2" id="id_new_email" maxlength="150" placeholder="Enter an email address" {% if form.email5.value %}value="{{ form.email5.value }}"{% endif %} required>
					<div id="id_email_invalid" class="invalid-feedback"></div>
				</div>
			</form>

			<button id="id_add_email" type="submit" class="btn btn-primary rounded-pill text-light text-nowrap" aria-label="Add">
				<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" class="bi bi-plus" viewBox="4 2.5 13 13">
					<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path>
				</svg>
				Add Email
			</button>
		</div>
	</div>
</div>

{% endblock %}